<template>
    <div class="page">
        <div class="content">
            <h3>示例</h3>
            <div class="demo-block">

                <div class="mobile">
                    <component :is="demoname" :key="sourceId"></component>
                </div>
                <div class="pc">
                    <component :is="demoname" :key="sourceId"></component>
                </div>
                <div class="meta">
                    <codemirror v-model="code" :options="options1"></codemirror>
                </div>
            </div>
            <h3>{{name}}.vue</h3>
            <codemirror :value="vueTextMap[name]" :options="options"></codemirror>
        </div>
    </div>
</template>
<script>
  import Vue from 'vue'
  import { Toast } from 'vant'
  import {vueTextMap,mockMap} from '@/service/search'

  export default {
    data () {
      return {
        toggle1:false,
        vueTextMap: vueTextMap,
        mockMap:mockMap,
        code:'',
        name: '',
        demoname: '',
        options1:{
          mode: 'vue',
          tabSize: 2,
        },
        sourceId:0,
        options:{
          mode: 'vue',
          tabSize: 2,
          lineNumbers: true,
          lineWrapping: true,
          extraKeys: {'Ctrl-Space': 'autocomplete'},
        }
      }
    },
    created () {
      this.name=this.$route.params.pathMatch
      const name=this.name;
      const obj=this.mockMap[name]
      let str=''
      for(let k in obj){
        str=str+' '+k+'='+'"'+obj[k]+'"'
      }
      this.code=`<div>
    <${name}${str}></${name}>
</div>`
    },
    watch:{
      code:function (val) {
        this.sourceId++
        const template=`${val}`
        this.demoname='demo-source'
        Vue.component(this.demoname, {
          template:template,
          mounted(){

          }
        })
      }
    },
    mounted(){
    },
    methods: {
      onSearch (val) {
        this.$router.push({
          path: '/search',
          query: {
            q: val
          }
        })
      },
      onCancel () {

      }
    }
  }
</script>
<style  type="text/css" lang="less" scoped>
.page{
    padding: 0px 20Px 0;
}
 .content>h3 {
    margin: 55Px 0 20Px;
     font-weight: 400;
     color: #1f2f3d;
     font-size: 22Px;
}
.demo-block {
    margin-bottom: 24Px;
    display: flex;
}

.demo-block .mobile {
    box-shadow: 0Px 4Px 12Px 4Px #ddd;
    width: 375Px;
    max-height: 667Px;
    background-color: #f7f8fa;
    overflow-x: hidden;
    overflow-y: auto;
    margin-right: 40px;
}
.demo-block .pc{
    box-shadow: 0Px 4Px 12Px 4Px #ddd;
    background-color: #f7f8fa;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    margin-right: 40px;
}
.demo-block .meta {
    width: 300Px;

}
.demo-block .description {
    padding: 20Px;
    box-sizing: border-box;
    border: 1Px solid #ebebeb;
    border-radius: 3Px;
    font-size: 14Px;
    line-height: 22Px;
    color: #666;
    word-break: break-word;
    margin: 10Px;
    background-color: #fff;
}
</style>
